<template>
	<view>
		<!-- 	待确认页面 -->
		<view class="cu-bar bg-white tabbar border shop bottom-list" v-show = "status == '10'">
			<button class="action"  @tap.stop="search">
				<view class="cuIcon-filter" :style="{color:theme}"></view> 筛选
			</button>
			<view class="action"  @tap.stop="order">
				<view class="cuIcon-order" :style="{color:theme}"></view> 排序
			</view>
			<view class="submit">已查询0条</view>
		</view>
		<!-- 搜索页面 -->
		<view v-show = "status == '20'" style="width:100%">
			<view class="bottom-modal show search-modal">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-red" @tap="hideModal">取消</view>
						<view class="action" :style="{color:theme}" @tap="confirmSearch">查询</view>
					</view>
					<view class="padding-sm">
						<js-tree-select></js-tree-select>
					</view>
				</view>
			</view>
		</view>
		<!-- 条件排序页面 -->
		<view v-show = "status == '30'">
			<view class="cu-modal bottom-modal show">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-red" @tap="hideModal">取消</view>
						<view class="action" :style="{color:theme}" @tap="confirmOrder">确定</view>
					</view>
					<view class="padding-sm">
						<view class="cu-list menu text-left">
							<view class="cu-item" @tap.stop="changeFlag">
								<view class="content">
									<text class="text-grey">用户</text>
								</view>
								<view class="action">
									<text :style="{color:theme}" v-show="flag" class="order-icon cuIcon-triangledownfill"></text>
									<text :style="{color:theme}" v-show="!flag" class="order-icon cuIcon-triangleupfill"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data(){
			return {
				// status状态   10等待用户点击 20用户点击搜索 30 用户点击排序
				status:10,
				CustomBar: this.CustomBar,
				flag:true
			}
		},
		computed:{
			...mapState(["theme"])
		},
		methods:{
			// 搜索条件筛选
			search(){
				this.status = "20"
			},
			// 排序条件筛选
			order(){
				this.status = "30"
			},
			// 隐藏搜索条件
			hideModal(){
				this.status = "10"
			},
			confirmOrder(){
				this.status = "10"
			},
			confirmSearch(){
				this.status = "10"
			},
			changeFlag(){
				this.flag = !this.flag
			}
		}
	}
</script>

<style scoped>
	.bottom-list{
		position:fixed;
		bottom:0;
		width:100%;
	}
	.search-modal{
		position: absolute;
		bottom: 0;
		max-height: 50vh;
		width: 100%;
	}
	.search-modal .cu-dialog{
		width: 100%;
	}
	.order-icon{
		font-size: 60rpx;
	}
</style>
